import React, {Component} from 'react';
import {Link, Redirect} from 'react-router-dom';
import {connect} from 'react-redux';
import ParticlesBg from "../../common/particles";
import {actionCreators} from './store';
import yzmURL from '../../style/img/yzm.png';
import zgURL from '../../style/img/logo-zg.png';
import szseURL from '../../style/img/logo-szse.png';
import zxqyzjURL from '../../style/img/logo-zxqyzj.png';
import QueueAnim from 'rc-queue-anim';

import './style.scss';

class Login extends Component {
    state = {
        show: true
    };
    dhHidden = () => {
        this.setState({
            show: !this.state.show
        });
    };
    
    render() {
        const {loginStatus} = this.props;
        if (!loginStatus) {
            return (
                <QueueAnim delay={500} type={['alpha', 'alpha']}>
                    {this.state.show ? [
                        <div className='login' key={'loginDHBox0'}>
                            <div className='login-main' key={'loginDHBox'}>
                                <QueueAnim delay={100} type={['left', 'right']} className='main-box' key={'loginDHMain'}>
                                    {this.state.show ? [
                                    <div className='name' key='loginDH1'> HOME FOR SMEs</div>,
                                    <p key='loginDH2'>深圳证券交易所 - 中小企业之家 - 项目管理系统</p>,
                                    <div className='input-prepend' key='loginDH3'>
                                        <input type="text" placeholder='Username' ref={(input) => {
                                            this.account = input
                                        }}/>
                                        <i className='iconfont form-icon'>&#xe601;</i>
                                    </div>,
                                    <div className='input-prepend' key='loginDH4'>
                                        <input type="password" placeholder='Password' ref={(input) => {
                                            this.password = input
                                        }}/>
                                        <i className='iconfont form-icon'>&#xe600;</i>
                                    </div>,
                                    <div className='input-prepend yzm-box' key='loginDH5'>
                                        <input type="text" className='yzm-input' placeholder='Credentials'/>
                                        <i className='iconfont form-icon'>&#xe602;</i>
                                        <div className='yzm-img' tabIndex='-1'>
                                            <img src={yzmURL} alt='验证码'/>
                                        </div>
                                    </div>,
                                    <div className='input-prepend' key={'loginDH6'}>
                                        <input type="button" className="login-btn" value="登 录"
                                               onClick={() => this.props.login(this.account, this.password)}/>
                                    </div>,]:null}
                                </QueueAnim>
                                <div className="footer" key={'loginDHBottom'}>
                                    <p className="footer-link">
                                        <a href="/" tabIndex='-1'>
                                            <img src={szseURL} alt='深圳证券交易所'/>
                                            深圳证券交易所
                                        </a>
                                        <a tabIndex='-1' onClick={this.dhHidden}>
                                            <img src={zxqyzjURL} alt='中小企业之家报名系统'/>
                                            前台报名系统
                                        </a>
                                        <a href="/" tabIndex='-1'>
                                            内容管理系统
                                        </a>
                                        <a href="/" tabIndex='-1'>
                                            会务系统
                                        </a>
                                    </p>
                                    <p className="copyright">
                                        <Link to="/admin" tabIndex='-1'>
                                            Copyright © 2019 HOME FOR SMEs All Rightsreserved Power
                                            <img src={zgURL} alt='版权'/>
                                        </Link>
                                    </p>
                                </div>
                            </div>,
                            <ParticlesBg key={'loginDHBox2'}/>
                        </div>,] : null}
                </QueueAnim>
            )
        } else {
            return <Redirect to='/admin'/>
        }
    };
}

const mapState = (state) => ({
    loginStatus: state.getIn(['login', 'login']),
});

const mapDispatch = (dispatch) => ({
    login(accountElem, passwordElem) {
        dispatch(actionCreators.login(accountElem.value, passwordElem.value));
    },
});

export default connect(mapState, mapDispatch)(Login);